<template>
  <div>
    <!--    <Search></Search>-->
    <!--    <ShopHeader></ShopHeader>
    <GoodsDetailNav></GoodsDetailNav> -->
    <div class="shop-item-path">
      <div class="shop-nav-container">
        <Breadcrumb>
          <BreadcrumbItem to="/">首页</BreadcrumbItem>
          <BreadcrumbItem to="/goodsList">{{ detail.shopName }}</BreadcrumbItem>
          <BreadcrumbItem>{{ detail.intro }}</BreadcrumbItem>
        </Breadcrumb>
      </div>
    </div>
    <!-- 商品信息展示 -->
    <ShowGoods :msg="detail" :imgs="img"></ShowGoods>
    <!-- 商品详细展示 -->
    <ShowGoodsDetail
      v-bind:imgs="img"
      v-bind:comments="comment"
    ></ShowGoodsDetail>
    <Spin size="large" fix v-if="isLoading"></Spin>
  </div>
</template>

<script>
import Search from "@/components/Search";
import GoodsDetailNav from "@/components/nav/GoodsDetailNav";
import ShopHeader from "@/components/header/ShopHeader";
import ShowGoods from "@/components/goodsDetail/ShowGoods";
import ShowGoodsDetail from "@/components/goodsDetail/ShowGoodsDetail";
import axios from "axios";
import store from "@/vuex/store";
import { mapState, mapActions } from "vuex";
export default {
  name: "GoodsDetail",
  beforeRouteEnter(to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  created() {
    // 取出商品列表页中传过来的商品id值
    let productId = this.$route.query.productId;
    this.getDetail(productId);
    this.getImg(productId);
    this.getComment(productId);
    this.loadGoodsInfo();
    sessionStorage.setItem("img", this.img);
  },
  data() {
    return {
      detail: [],
      img: [],
      comment: [],
      tagsColor: ["blue", "green", "red", "yellow"]
    };
  },
  methods: {
    ...mapActions(["loadGoodsInfo"]),
    // 商品信息
    getDetail(productId) {
      let _this = this;
      this.$http.get("/product/" + productId).then(resp => {
        _this.detail = resp.data.data;
        if (resp.data.code === 404) {
          _this.$router.push("/404");
        }
      }).catch(err => {
        this.$Message.error(err);
      })
    },
    // 商品图片
    getImg (productId) {
      const _this = this
      this.$http.get('/productImage/' + productId)
        .then(resp => {
          _this.img = resp.data.data;
        }).catch(err => {
          _this.$Message.error(err)
        })
    },
    // 商品评价
    getComment(productId) {
      const _this = this
      this.$http.get('/comment/' + productId)
        .then(resp => {
          this.comment = resp.data.data;
        }).catch(err => {
          _this.$Message.error(err)
        })
    }
  },
  computed: {
    ...mapState(['goodsInfo', 'isLoading'])
  },
  components: {
    Search,
    ShopHeader,
    GoodsDetailNav,
    ShowGoods,
    ShowGoodsDetail
  },
  store
};
</script>

<style scoped>
.shop-item-path {
  height: 38px;
  background-color: rgb(255, 255, 255);
  line-height: 38px;
  color: #2c2c2c;
}
.shop-nav-container {
  margin: 0px auto;
  width: 80%;
}
</style>
